import { messages } from "share/common";
import React, { Component } from "react";
import Template from "components/UI/template";
import { Tabs } from "antd";
import { Condition } from "components/index";
import AccrualManagementConfirm from "./accrual-management-confirm";
import AccrualManagementRecheck from "./accrual-management-recheck";
import AccrualManagementView from "./accrual-management-view";

const { Header, Middle } = Template;
const { TabPane } = Tabs;
const { If } = Condition;

class AutoAccrualManagement extends Component {
  tabs = [
    { tab: messages("finance-10.key56") /*自动预提*/, key: "accrual-management-confirm" },
    { tab: messages("finance-10.key54") /*预提复核*/, key: "accrual-management-recheck" },
    { tab: messages("finance-10.key55") /*预提批次查看*/, key: "accrual-management-view" },
  ];

  state = {
    status: "accrual-management-confirm",
  };

  render() {
    const { status } = this.state;
    return (
      <Template>
        <Header>
          <Tabs defaultActiveKey={status} onChange={(status) => this.setState({ status })}>
            {this.tabs.map((item) => (
              <TabPane tab={item.tab} key={item.key} />
            ))}
          </Tabs>
        </Header>
        <Middle>
          <Condition>
            <If value={status === "accrual-management-confirm"}>
              <AccrualManagementConfirm />
            </If>
            <If value={status === "accrual-management-recheck"}>
              <AccrualManagementRecheck />
            </If>
            <If value={status === "accrual-management-view"}>
              <AccrualManagementView />
            </If>
          </Condition>
        </Middle>
      </Template>
    );
  }
}

export default AutoAccrualManagement;
